<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>DB'S BLOG</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=""/>
    <link href="http://op93pqovl.bkt.clouddn.com/images/blog.ico" rel="icon" type="image/x-icon">
    <link  href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel='stylesheet' type='text/css'/>
    <link href="http://op93pqovl.bkt.clouddn.com/css/style.css" rel='stylesheet' type='text/css'/>
    <link th:href="@{/foreground/css/mystyle.css}" href="../../static/foreground/css/mystyle.css" rel='stylesheet'
          type='text/css'/>
    <link href="http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.min.css" rel="stylesheet">
    <link href="http://op93pqovl.bkt.clouddn.com/css/jquery.emoji.css" rel="stylesheet">
    <!--百度站点统计-->
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?8bbebf81099e93cb652e9215fa86d98c";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

</head>
<body>
<div class="header" id="ban" th:include="foreground/common::header"></div><!--头部导航结束-->

<div class="header-bottom" th:include="foreground/common::blogTitle"></div><!--博客标题结束-->

<!--<div class="banner-1">
</div>-->


<!-- technology-left -->
<div class="technology">
    <div class="container">
        <div class="col-md-12 technology-left" style="width: 100%">
            <div class="blog">
                <div class="row">
                    <div class="col-md-12">
                        <div class="services w3l " >
                            <fieldset>
                                <legend style="text-align: center">本页面可留言、吐槽、提问。欢迎灌水，杜绝广告！</legend>
                            </fieldset>
                            <div class="contact-section">
                                <div class="contact-grids" style="margin: 0">
                                    您的昵称 : <input type="text" placeholder="请输入您的昵称" class="nickName" id="nickName"><br>
                                    <span class="comment-title">评论内容 : </span><br>
                                    <textarea class="comment" id="content" rows="3"></textarea>
                                    <input type="button" onclick="addBlogAdvice()" value="Send" class="send">
                                </div>
                            </div><!--输入框结束-->
                            <hr id="responseHr">
                            <div class="response"  th:each="blogAdvice:${blogAdviceList}">
                                <div class="media response-info">
                                    <div>
                                        <div class="media-left response-text-left">
                                            <a href="#">
                                                <img th:src="@{/foreground/images/sin2.jpg}" src="../../static/foreground/images/sin1.jpg" class="img-responsive" alt="" style="width: 50px">
                                            </a>
                                        </div>
                                        <div class="media-body response-text-right">
                                            <p ><span th:text="${blogAdvice.nickName}+' : '+${blogAdvice.content}" class="sourceText">留言内容 : balabal></span></p>
                                            <ul>
                                                <li th:text="${#calendars.format(blogAdvice.publishTime,'yyyy-MM-dd HH:mm:ss')}">Jun 21, 2016</li>
                                                <li><a th:href="'javascript:showReply('+${blogAdvice.id}+')'" href="javascript:showReply()"  th:id="'replyButton'+${blogAdvice.id}" id="replyButton">回复</a></li>
                                            </ul>
                                            <div class="media response-info">
                                                <div class="media-left response-text-left" style="width: 100%">
                                                    <div th:each="blogAdvice:${blogAdvice.blogAdviceReplyVOList}" th:class="'replyPanel'+${blogAdvice.id}" class="replyPanel">
                                                        <a >
                                                            <img th:src="@{/foreground/images/sin1.jpg}" th:if="${blogAdvice.role}==true" src="../../static/foreground/images/sin2.jpg" class="img-responsive"
                                                                 alt="" style="width: 50px">
                                                            <img th:src="@{/foreground/images/sin2.jpg}" th:if="${blogAdvice.role}==false" src="../../static/foreground/images/sin2.jpg" class="img-responsive"
                                                                 alt="" style="width: 50px">
                                                        </a>
                                                        <div style="display: inline-block;vertical-align: middle">
                                                            <p class="reply-content sourceText" th:if="${blogAdvice.role}==true" th:text="' 博主回复 : '+${blogAdvice.content}">博主回复balabala</p>
                                                            <p class="reply-content sourceText" th:if="${blogAdvice.role}==false" th:text="' 楼主回复 : '+${blogAdvice.content}">博主回复balabala</p>
                                                            <ul class="reply-date">
                                                                <li th:text="${#calendars.format(blogAdvice.publishTime,'yyyy-MM-dd HH:mm:ss')}">July 17, 2016</li>
                                                            </ul>
                                                        </div>
                                                        <div class='lineBar'></div>
                                                    </div>

                                                    <div class="contact-section" style="padding:0;display: none" th:id="'replyPanel'+${blogAdvice.id}" id="replyPanel">
                                                        <span class="blogAdvice-title">回复内容 : </span><br>
                                                        <textarea class="comment" th:id="'blogAdviceReply'+${blogAdvice.id}"  rows="3"></textarea>
                                                        <input type="button" th:onclick="'addBlogAdviceReply('+${blogAdvice.id}+')'" class="send" value="提交">
                                                    </div><!--回复框-->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                </div><!--留言结束-->
                                <hr>
                            </div>
                            <nav class="paging wow fadeInDown" data-wow-duration=".5s" data-wow-delay=".2s" style="text-align: center">
                                <ul class="pagination pagination-mg" th:utext="${pageNation}" >
                                </ul>
                            </nav> <!--分页结束-->
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="clearfix"></div>
        <!-- technology-right -->
    </div>
</div>

<div class="footer" th:include="foreground/common::footer"></div><!--尾部结束-->

<div class="copyright wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s"
     th:include="foreground/common::copyright"></div><!--版权区结束-->
<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
<script th:src="@{/foreground/js/myjs.js}" src="../../static/foreground/js/myjs.js"></script>
<script src="http://cdn.bootcss.com/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="http://cdn.bootcss.com/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.min.js" type="text/javascript"></script>
<script src="http://op93pqovl.bkt.clouddn.com/js/jquery.emoji.js" type="text/javascript" ></script>
<script src="http://cdn.bootcss.com/layer/3.0.1/layer.min.js" type="text/javascript"></script>

<script>
    window.onload = function () {
        $("#content").emoji({
            animation: 'slide',
            icons: [{
                name: "qq",
                path: "/foreground/images/qq/",
                maxNum: 91,
                excludeNums: [41, 45, 54],
                file: ".gif",
                placeholder: "#qq_{alias}#"
            }]
        });
        parse();

    };
    function parse() {
        $(".sourceText").emojiParse({
            icons: [{
                path: "/foreground/images/qq/",
                file: ".gif",
                placeholder: "#qq_{alias}#"
            }]
        });
    }
    function showReply(id) {

        var div = document.getElementById("replyPanel"+id);
        var button = document.getElementById("replyButton"+id);
        var show = div.dataset.show;//获取data-show
        if(show=='true'){
            div.style.display = "none";
            div.dataset.show = "false";
            button.innerHTML = "回复";

        }else{
            div.style.display = "block";
            div.dataset.show = "true";
            button.innerHTML = "收回";
        }
    }
    function addBlogAdvice(){
        var nickName=$("#nickName").val();
        var content=$("#content").val();
        if(nickName==null||nickName==''){
            alert("请输入您的昵称!");
            return ;
        }
        if(content==null||content==''){
            alert("请输入回复内容!")
            return;
        }
        $.ajax({
            url:"/blogAdvice",
            type:'POST',
            data:{
                nickName:nickName,
                content:content
            },
            success:function(result){
                var result=eval("("+result+")");
                if(result.success==false) {
                    layer.alert("留言失败，可能是系统出了故障~~(╯﹏╰)");
                    return;
                }else {
                    var response=$("#responseHr");
                    $("<div class='response'>" +
                        "<div class='media response-info'>" +
                        "<div>" +
                        "<div class='media-left response-text-left'><a href='#'><img src='/foreground/images/sin2.jpg' class='img-responsive' style='width: 50px'></a></div>"+
                        "<div class='media-body response-text-right'><p ><span class='sourceText'>"+result.nickName+" : "+result.content+"</span></p><ul>"+
                        "<li>"+result.publishTime+"</li>"+
                        "<li><a href='javascript:showReply("+result.id+")' id='replyButton"+result.id+"'>回复</a></li></ul><div class='media response-info'><div class='media-left response-text-left' style='width: 100%'>"+
                        "<div class='contact-section' style='padding:0;display: none'  id='replyPanel"+result.id+"'>"+
                        "<span class='comment-title'>回复内容 : </span><br><textarea class='comment' id='blogAdviceReply"+result.id+"' rows='3'></textarea><input type='button' onclick='addBlogAdviceReply("+result.id+")' class='send' value='提交'>"+
                        "</div></div></div></div></div><div class='clearfix'></div></div><!--留言结束--><hr></div>").insertAfter(response);
                    parse();
                    layer.alert("留言成功!感谢您的建议!");
                    reset();
                }
            }
        })

    }

    function reset(){
        var nickName=$("#nickName").val("");
        var content=$("#content").val("");
    }

    function addBlogAdviceReply(blogAdviceId){
        var content=$('#blogAdviceReply'+blogAdviceId).val();
        if(content==null||content==''){
            alert("请输入回复内容哦!");
            return;
        }
        $.ajax({
            url:'/blogAdvice/reply',
            type:'POST',
            data:{
                content:content,
                blogAdviceId:blogAdviceId
            },
            success:function (result) {
                var result=eval("("+result+")");
                if(result.success==false){
                    alert("回复失败，可能是系统出了故障~~(╯﹏╰)");
                    return;
                }else{
                    var imgSrc;
                    var title;
                    if(result.role){
                        imgSrc='/foreground/images/sin1.jpg';
                        title=' 博主回复 : ';
                    }else{
                        imgSrc='/foreground/images/sin2.jpg';
                        title=' 楼主回复 : ';
                    }
                    var replyPanel=document.getElementsByClassName('replyPanel'+blogAdviceId);
                    if(replyPanel.length==0){
                        $("<div  class='replyPanel"+blogAdviceId+"'><a><img src="+imgSrc+" class='img-responsive' style='width: 50px'></a>"+
                            "<div style='display: inline-block;vertical-align: middle'><p class='reply-content sourceText' >"+title+result.content+"</p><ul class='reply-date'>"+
                            "<li>"+result.publishTime+"</li></ul></div><div class='lineBar'></div></div>").insertBefore($("#replyPanel"+blogAdviceId));
                    }else{
                        $("<div  class='replyPanel"+blogAdviceId+"'><a><img src="+imgSrc+" class='img-responsive' style='width: 50px'></a>"+
                            "<div style='display: inline-block;vertical-align: middle'><p class='reply-content sourceText' >"+title+result.content+"</p><ul class='reply-date'>"+
                            "<li>"+result.publishTime+"</li></ul></div><div class='lineBar'></div></div>").insertAfter(replyPanel[replyPanel.length-1]);
                    }
                    parse();
                }

            }
        });
    }
</script>
</body>
</html>




